<!-- 波浪组件 -->
<template>
	<view class="template-wave">
		<!-- 内容区 -->
		<view class="content">
			<slot name="content"></slot>
		</view>
		<!-- 波浪 -->
		<view class="tnwave waveAnimation">
		  <view class="waveWrapperInner bgTop">
			<view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
		  </view>
		  <view class="waveWrapperInner bgMiddle">
			<view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
		  </view>
		  <view class="waveWrapperInner bgBottom">
			<view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.template-wave {
		position: relative;
		width: 100%;
		height: 34vh;
		background: 
			linear-gradient(to bottom, transparent, rgb(238, 232, 232)),
			linear-gradient(90deg, rgba(248, 106, 172, 0.562) 20px, rgb(194, 252, 194));
	}
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		background-color: aliceblue;
	}
	
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}
		50% {
			ransform: translateX(-25%) translateZ(0) scaleY(1)
		}
		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}
	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}
	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}
	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}
  
	.bgTop {
		opacity: 0.4;
	}
	.waveTop {
		background-size: 50% 45px;
	}
	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}
  
	.bgMiddle {
		opacity: 0.6;
	}
	.waveMiddle {
		background-size: 50% 40px;
	}
	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}
  
	.bgBottom {
		opacity: 0.95;
	}
	.waveBottom {
		background-size: 50% 35px;
	}
	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
	
</style>
